
<!-- 信息确认页面 -->

<template>
    <div class="formSection">
        
    	<!-- 客户 -->
    	<slot-form-customer :slotFormSet="slotFormCustomerSet"></slot-form-customer>

    	<!-- 年龄 -->
    	<slot-form-age :slotFormSet="slotFormAgeSet"></slot-form-age>
    	
    	<!-- 风险偏好 -->
    	<slot-form-select :slotFormSet="slotFormRiskSet"></slot-form-select>

        <!-- 下一步 默认灰色不可点击-->
        <mt-button @click="goNext()" class="bottom" size="large" :disabled="disabled"  ref="nextBtn">下一步</mt-button>

    </div>

</template>

<script>

//表单组件js&less
import form from '@src/common/components/form/form.js'
// import '@src/common/components/form/form.less'

//按钮less
import '@src/common/less/button.less'

//表单项
import slotFormCustomer from '@src/common/components/form/slot/customer'
import slotFormAge from '@src/common/components/form/slot/age'
import slotFormSelect from '@src/common/components/form/slot/select'
 


export default {
    name: "addAsset",
    mixins:[form],
    components:{
        slotFormCustomer,
        slotFormAge,
        slotFormSelect
    },
    data() {
        return {

            slotFormCustomerSet: {
                params: {
                    label: '客户姓名',
                    isRequired: true,
                    icon: ''
                },
                beforeData: null
            },

            //年龄表单配置项
            slotFormAgeSet: {
                params: {
                    label: '客户的年龄是',
                    unit: '岁',
                    maxLength: 3,
                    oninput: true,
                    name: 'age',
                    isRequired: true
                },
                beforeData: null
            },

            slotFormRiskSet: {
                params: {
                    label: '客户的风险偏好为',
                    name: 'riskType'
                },
                beforeData: null
            },

            //存储表单数据，用于提交接口
            formData:{
                customerNo:null,   //客户编号
                customerSource:null,  //客户来源
                customerName:null, //客户姓名
                age:  null,//年龄
                riskType: null,  //风险承受能力 
                // id: argId ?  argId  : '', //为空时新增，否则为修改
            },

            //必填的表单的状态
            formBtn: {
                customerNameGet: false,
                ageGet: false
            },

            //按钮状态值
            disabled: true,
        }
    },

    mounted() {

        //以下为模仿接口成功逻辑
        
        //表单项传回显的初始值
        this.slotFormCustomerSet.beforeData = '张三'
        // this.slotFormAgeSet.beforeData = 10
        this.slotFormRiskSet.beforeData = '平衡型'

        //风险偏好点击出现的选择列表
        this.slotFormRiskSet.selectList = [{values: ['年假', '事假', '病假', '婚假', '其他']}]
    },

    watch:{

        //监听formData的变化，如果有变动，修改按钮状态
        formBtn: {
            handler(newVal, oldVal){

                if( newVal.customerNameGet && newVal.ageGet ){
                    //都为true时，修改按钮的状态为可点
                    this.disabled = false
                }
                else{
                    //否则不可点
                    this.disabled = true
                }
                
            },
            deep: true
        },
    },

    methods:{

        //客户表单的值变了
        changeCustomerVal( newVal,oldVal ){

            console.log( '收到的值', newVal)

            this.formData.customerName = newVal;

            //设置到formData上
            if(!!newVal){
                console.log('customer值变化')
                //值有改变，且新值和旧值不相等
                //触发父元素的切换按钮状态的方法
                this.formBtn.customerNameGet = true
            }
            else{
                this.formBtn.customerNameGet = false
            }

            
        },

        //input表单的值变了
        changeInputVal( name, newVal,oldVal ){

            console.log( '收到的值', newVal)

            if(!!newVal){
                if( name == 'age'){
                    this.formData.age = newVal;
                    this.formBtn.ageGet = true
                }
            }
            else{
                if( name == 'age'){
                    this.formData.age = newVal;
                    this.formBtn.ageGet = false
                }
            }
        },

        //select表单的值变了
        changeSelectVal( name, newVal,oldVal){
            console.log( '收到的值', newVal)
            if( name == 'riskType'){
                this.formData.riskType = newVal;
            }
        },

        //下一步
        goNext(){
            this.$parent.changeToSteps(2)
            // this.$router.push(goUrl.zcpzQuestionnaireSureUrl)
        }
    }
}

</script>